<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用jquery绘制矩形拖动轨迹</title>
    <script src="js/jquery-1.11.1.js"></script>
    <style>
        .father{
            border: black solid 1px;
            width: 800px;
            height: 600px;
            margin-left: 30px;
            margin-top: 30px;
        }
    </style>
</head>
<body>
    起始x坐标：<input type="text" readonly id="nowX">&nbsp;&nbsp;&nbsp;&nbsp;起始y坐标：<input type="text" id="nowY" readonly><br>
    终止x坐标：<input type="text" readonly id="endX">&nbsp;&nbsp;&nbsp;&nbsp;终止y坐标：<input type="text" id="endY" readonly><br>
    <input type="button" value="清空矩形" onclick="clearRect()"><br>

    <!-- 画矩形的容器 -->
    <div class="father" onmousedown="startDrawRect(event)" onmouseup="endDrawRect(event)"><!--onmouseup="endDrawRect(event)"-->
    </div>
</body>
<script>

    var fatherTop = $('.father').offset().top;
    var fatherLeft = $('.father').offset().left;
    
    var startx;
    var starty;

    var endx;
    var endy;

    // 鼠标左键按下后先记录起始的x、y坐标，并给容器赋予鼠标移动事件
    function startDrawRect(e){
        startx = e.clientX;
        starty = e.clientY;
        $('#nowX').val(startx);
        $('#nowY').val(starty);
        $('.father').attr("onmousemove","moveTrail(event)");
    }

    // 鼠标移动的时候展示轨迹
    function moveTrail(e){
        endx = e.clientX;
        endy = e.clientY;
        $('#endX').val(endx);
        $('#endY').val(endy);
        $('#trail').remove();
        showTrail();
    }

    // 鼠标左键松开时确定矩形框位置，画上矩形框，并移除容器内鼠标移动事件
    function endDrawRect(e){
        $('.father').removeAttr("onmousemove");
        endx = e.clientX;
        endy = e.clientY;
        $('#endX').val(endx);
        $('#endY').val(endy);
        $('#trail').remove();
        
        showEndRect();
    }
    
    // 展示矩形轨迹
    function showTrail(){
        var width = endx - startx;
        var height = endy - starty;
        var marginLeft = startx - fatherLeft;
        var marginTop = starty - fatherTop;
        var dwidth = width;
        var dheight = height;

        if(width<0){
            dwidth = -dwidth;
            marginLeft = endx - fatherLeft;
        }
        
        if(height<0){
            dheight = -dheight;
            marginTop = endy - fatherTop;
        }
        
        var trailDiv = '<div style="border:1px solid red;width:'+dwidth+'px;height:'+dheight+'px;margin-left:'+marginLeft+'px;margin-top:'+marginTop+'px;position:absolute;" id="trail"></div>';


        console.log("插入的div标签",trailDiv);
        $('.father').append(trailDiv);
    }

    // 绘制最后的矩形框
    function showEndRect(){
        var width = endx - startx;
        var height = endy - starty;
        var marginLeft = startx - fatherLeft;
        var marginTop = starty - fatherTop;
        var dwidth = width;
        var dheight = height;


        if(width<0){
            dwidth = -dwidth;
            marginLeft = endx - fatherLeft;
        }
       
        if(height<0){
            dheight = -dheight;
            marginTop = endy - fatherTop;
        }
        
        var trailDiv = '<div style="border:1px solid red;width:'+dwidth+'px;height:'+dheight+'px;margin-left:'+marginLeft+'px;margin-top:'+marginTop+'px;position:absolute;" class="endRect"></div>';


        console.log("插入的div标签",trailDiv);
        $('.father').append(trailDiv);
    }

    // 清除所有绘制的矩形框
    function clearRect(){
        $('.endRect').remove();
    }
</script>
</html>